import React, { useState } from 'react'
import style from './Home.module.scss'
import { Outlet,Link,NavLink, useNavigate } from 'react-router-dom'
import { Provider } from '../context/Context'
import classNames from 'classnames'
const Home = () => {
  const [sortType,setSortType] = useState(0) //0:默认 1:升序 2:降序
  const [isGrid,setIsGrid] = useState(false)
  const navigate = useNavigate()

  const changeSortType = () => {
    const type = sortType + 1 > 2? 0: sortType + 1 
    setSortType(type)
  }

  return (
    <Provider value={{sortType,isGrid}}>
      <div className={style.home}>
        <header>
          <input type="text" readOnly placeholder='搜索' onClick={() => navigate('/search')}/>
        </header>
        <nav>
          <NavLink to="/home/zh">综合</NavLink>
          <NavLink to="/home/xl">销量</NavLink>
          <NavLink to="/home/sx">上新</NavLink>
          <div className={style.price} onClick={changeSortType}>
            <p>价格</p>
            <p className={style.icons}>
              <svg t="1735624012709" className={classNames({[style.activeIcon]:sortType === 1})} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1730" width="16" height="16"><path d="M511.997952 268.025732 146.975708 755.974268l730.048584 0L511.997952 268.025732" p-id="1731"></path></svg>
              <svg t="1735624059480" className={classNames({[style.activeIcon]:sortType === 2})} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1940" width="16" height="16"><path d="M511.997952 755.974268l365.02634-487.950584L146.975708 268.023684 511.997952 755.974268" p-id="1941"></path></svg>
            </p>
          </div>
          <div className={style.icon} onClick={() => setIsGrid(!isGrid)}>{isGrid? '列表':'网格'}</div>
        </nav>
        <main>
          <Outlet />
        </main>
      </div>
    </Provider>
  )
}



export default Home